<template>
  <div class="admin-container">
    <!-- 搜索卡片 -->
    <div class="search-card">
      <el-form :model="searchForm" label-width="100px" class="search-form">
        <div class="search-grid">
          <el-form-item label="角色名称">
            <el-input 
              v-model="searchForm.name" 
              placeholder="请输入角色名称" 
              prefix-icon="Memo" 
              clearable
              style="width: 200px;"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getLists" :icon="Search">
              搜索
            </el-button>
            <el-button @click="resetSearch" :icon="RefreshRight" plain>
              重置
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <!-- 表格卡片 -->
    <div class="table-card">
      <div class="table-header">
        <div class="table-title">
          <el-icon><UserFilled /></el-icon>
          <span>角色列表</span>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="handleAdd" :icon="Plus">添加角色</el-button>
        </div>
      </div>

      <!-- 现代化表格 -->
      <el-table
        :data="lists"
        style="width: 100%"
        empty-text="暂无数据"
        class="modern-table"
        :header-cell-style="{ background: '#f9fafb', color: '#374151', fontWeight: 600 }"
      >
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column prop="name" label="角色名称" align="center" />
        <el-table-column prop="remarks" label="备注" align="center" />
        <el-table-column label="状态" width="100" align="center">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
              @change="changeEdit(scope.row)"
              active-text="启用"
              inactive-text="禁用"
              inline-prompt
            />
          </template>
        </el-table-column>
        <el-table-column label="创建日期" width="180" align="center">
          <template #default="scope">
            <div class="time-info">
              <div>{{ formatDate(scope.row.created_at) }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" fixed="right" align="center">
          <template #default="scope">
            <div class="action-buttons">
              <el-button
                size="small"
                type="primary"
                :icon="Edit"
                @click="handleEdit(scope.row)"
              >
              编辑
              </el-button>
              <el-button
                size="small"
                type="success"
                :icon="Memo"
                @click="handlePermission(scope.row)"
                v-if="scope.row.id != 1"
              >
              权限
              </el-button>
              <el-button
                size="small"
                type="danger"
                :icon="Delete"
                @click="handleDelete(scope.row)"

                v-if="scope.row.id != 1"
              >
              删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <edit ref="editRef" @success="getLists" />
  <permission ref="permissionRef" @success="getLists" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getRoleListApi, deleteRoleApi, updateRoleApi } from '@/api/auth'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Edit, Delete, Search, RefreshRight, UserFilled, Memo } from '@element-plus/icons-vue'
import edit from './edit.vue'
import permission from './permission.vue'
const editRef = ref()
const permissionRef = ref()

const lists = ref([])

const searchForm = ref<any>({
  name: '',
})

const formatDate = (dateString: string) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const getLists = async () => {
  const res = await getRoleListApi({
    name: searchForm.value.name,
  })
  lists.value = res.data
}
const handleAdd = () => {
  editRef.value.open()
  editRef.value.setFormData()
}

const handleEdit = (row: any) => {
  editRef.value.open()
  editRef.value.setFormData(row)
}

const handlePermission = (row: any) => {
  permissionRef.value.open(row)
  permissionRef.value.setFormData(row)
}

const handleDelete = async (row: any) => {
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteRoleApi(row.id).then(() => {
      ElMessage.success('删除成功')
      getLists()
    })
  })
}
const changeEdit = async (row: any) => {
  await updateRoleApi(row)
  getLists()
}
const resetSearch = () => {
  searchForm.value = {}
  getLists()
}

getLists()
</script>

<style scoped>

.admin-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 搜索卡片 */
.search-card {
  background: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.search-header {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.search-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

/* 表格卡片 */
.table-card {
  background: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.table-header {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

/* 现代化表格 */
.modern-table {
  flex: 1;
}

:deep(.el-table__header-wrapper) {
  border-radius: 8px 8px 0 0;
}

:deep(.el-table__body-wrapper) {
  border-radius: 0 0 8px 8px;
}

/* 时间信息样式 */
.time-info {
  text-align: center;
}

.time-label {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-grid {
    grid-template-columns: 1fr;
  }

  .search-actions {
    justify-content: flex-end;
  }
}
</style>
